<template>
  <div>
    <Card
      size="small"
      :title="echartsData.title"
      :bordered="false"
      class="!mt-0 !rounded-lg !p-6px"
    >
      <div class="flex flex-row items-center justify-center">
        <RangePicker show-time v-model:value="selectTime" placement="bottomLeft" />
      </div>
      <div ref="chartRef" class="h-160px w-full mt-1"></div>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { Card, RangePicker } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { ref, Ref, watch } from 'vue';
  import dayjs from 'dayjs';

  const selectTime = ref<any>([dayjs(), dayjs().subtract(1, 'hour')]);
  let emits = defineEmits(['selectTime']);
  let props = defineProps(['echartsData']);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  watch(
    () => props.echartsData.echartsList,
    (_nVal) => {
      const dataList = props.echartsData.echartsList;
      const handleData = {};
      let sum = 0;
      // 求和
      dataList.map((item) => {
        sum += item.value;
      });
      // 数据处理
      dataList.map((item) => {
        handleData[item.name] = item;
        handleData[item.name].percentage = ((item.value / sum) * 100).toFixed(1) + '%';
      });
      setOptions({
        legend: {
          show: true,
          icon: 'circle',
          left: 'left',
          itemWidth: 10,
          itemStyle: {
            borderColor: 'none',
          },

          textStyle: {
            rich: {
              name: {
                color: '#606266',
                fontSize: 14,
              },
              percentage: {
                color: '#606266',
                fontSize: 16,
                padding: [0, 0, 0, 30],
                align: 'right',
              },
            },
          },
        },

        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'pie',
            color: ['#4D88FE', '#50CCCB', '#FFBF3C'],
            radius: '74%',
            left: 'center',
            data: dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              width: 100,
              fontSize: 12,
            },
            itemStyle: {
              borderColor: '#fff',
            },
          },
        ],
      });
    },
    {
      deep: true,
    },
  );
  watch(
    () => selectTime.value,
    (nVal) => {
      emits('selectTime', [dayjs(nVal[0]).valueOf(), dayjs(nVal[1]).valueOf()]);
    },
  );
</script>
